<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">app</div>
  </body>
  <script
    src="https://unpkg.com/react@16/umd/react.production.min.js"
    crossorigin
  ></script>
  <script
    src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    crossorigin
  ></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    function getSizeImage(imgUrl, size) {
      return imgUrl + `param=${size}x`
    }
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          title: '计数开始',
          imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F21092422494a092-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645002905&t=af0b63e86ff63af8733dbddef693fd26',
          active: false
        }
        // this.btnClick = this.btnClick.bind(this)
      }
      btnClick = (name, e) => {
        console.log(e)
      }
      btn2 = (e) => {
        console.log(e)
      }
      render(h) {
        const {title, imgUrl, active} = this.state
        return (
          <div class='box'>
            <h2 title={title}>当前计数</h2>
            {/*这样的处理方式都是可以使用的*/}
            <img src={getSizeImage(imgUrl,160)} alt="" />
            <div className={'box title ' + (active ? 'active': '')}>123</div>
            <button onClick={(e) => {this.btnClick('why', e)}}>123</button>
            <button onClick={this.btn2}>456</button>
          </div>
        );
      }
    }

    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>
</html>
